<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单数据列表</title>

    <script th:src="@{/jquery-3.6.0.min.js}"></script>

</head>
<body>

<h1>菜单管理界面</h1>

<button onclick="javascript:window.location.href='/menu/add'">添加菜单</button>
<button id="deleteAll">批量删除</button>

<input type="text" name="menuName" id="menuName" th:value="${menuName!=null?menuName:''}"> <button onclick="search()">搜索</button><br/>
<table border="1">
    <tr>
        <th>
            <input type="checkbox" id="all"> 全选
        </th>
        <th>序号</th>
        <th>ID</th>
        <th>菜单名称</th>
        <th>菜单地址</th>
        <th>操作</th>
    </tr>
    <tr th:each="myMenu,myMenuStat : ${data.menus}">
        <td>
            <input type="checkbox" th:id="|id_${myMenu.id}|" th:value="${myMenu.id}">
        </td>
        <td th:text="${myMenuStat.count}">xxxxx</td>
        <td th:text="${myMenu.id}">xxxxx</td>
        <td th:text="${myMenu.menuName}">张三</td>
        <td th:text="${myMenu.url}">张三</td>
        <td >
            <a th:href="@{/menu/add(id=${myMenu.id})}">编辑</a>|<a th:href="@{/menu/del(id=${myMenu.id})}">删除</a>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <a href="javascript:void(0)" th:onclick="goTo(1)">首页</a>
            <a href="javascript:void(0)" th:onclick="|goTo(${current - 1})|" th:if="${current > 1}">上一页</a>
            <a href="javascript:void(0);" th:if="${current <= 1}">上一页</a>

            <a  href="javascript:void(0)" th:onclick="|goTo(${current + 1})|" th:if="${current < data.pages}">下一页</a>

            <a href="javascript:void(0);" th:if="${current >= data.pages}">下一页</a>

            <a  href="javascript:void(0)" th:onclick="|goTo(${data.pages})|">尾页</a>
        </td>

    </tr>
</table>


</body>

<script>

    jQuery(function(){ //当页面加载完成之后在执行这里的代码
        $('#all').click(function(){ //$('#all'):找到id是all的页面元素 click:绑定点击事件
            //找到id_开头的所有id元素
            //prop:属性 checked:选中状态
            $('input[id^=id_]').prop('checked',this.checked)
        })

        $("#deleteAll").click(function(){ //给id是deleteAll绑定点击事件
            var ids = [] //数组对象
            //each
            // i:索引从0开始
            // e:HTML元素
            //获取id是id_开头的所有元素 并且是选中状态的 checked:选中状态
            $("input[id^='id_']:checked").each(function(i,e){
                console.log(e.value)
                ids.push(e.value)
            })
            //ajax:异步加载 将 ids传递到后端
            jQuery.ajax({
                url:'/menu/delAll',
                type:'post',
                contentType:'application/json',//发送到服务器的数据类型
                data:JSON.stringify(ids),//将数组对象转换为json字符串:ids是数组对象
                success: function(msg){
                    if(msg == 'success'){
                        window.location.href='/menu/list'
                    }
                },
                error:function(err){
                    console.log(err)
                }
            })

        })

    })

    function search(){
        var menuName = document.getElementById('menuName').value
        window.location.href='/menu/list?menuName='+menuName //页面上做跳转
    }

    function goTo(current){
        var menuName = "[[${menuName!=null?menuName:''}]]" //获取后端menuName

        if(menuName==null || menuName ==''){
            window.location.href='/menu/list?current='+current
        }else{
            window.location.href='/menu/list?current='+current + '&menuName='+menuName
        }

    }

</script>

</html>